Css2css intranet upgrade full record

Time:2020-9-23

1 Introduction

Usually, we can easily choose the pre compiled syntax of SASS and less when we use scaffolding in new projects.

vue create ui
ng new your_application --style=scss

However, when we are halfway through the development of our project, we suddenly find that SCSS is much better than CSS one day after studying some things. At this time, we will face a big problem: how to convert all the CSS of the current project into SCSS for future development? It took a week to upgrade the whole scheme. The main process is as follows:

2 steps

First, declare that all CSS rules can now run on sass syntax rules.

2.1 name your. CSS file. SCSS

To use sass from your current project, the first thing you need to do is put your.cssTo.scssDocuments.

2.2 change all references

There are some files that need to change the location of the CSS file, usually the following:

  • xxx.component.ts The CSS file path of styleurls in the @ component decorator in the file.
  • If you refer to bootstrap or font awesomes, you can change the file imported into its CSS file to a. SCSS alternative.
  • In your Vue file, your style.css Files, you have to change them to. SCSS because we have renamed it.

After completing the above steps (PS: if you use font awesomes), the following errors may occur unexpectedly:

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/styles.scss)
Module Error (from ./node_modules/postcss-loader/lib/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: /node_modules/font-awesome/scss/_path.scss:9:4: Can't resolve '../fonts/fontawesome-webfont.woff' in '/src'

Adding the following line before @ importfont awesomescss solves this problem.

$fa-font-path: "~font-awesome/fonts";

PS: it is possible that the path of some URLs cannot be found

3. Introduce node sass and sass loader

3.1 install sass dependency package

npm install --save-dev sass-loader

3.2 sass loader depends on node sass, so install node sass

npm install --save-dev node-sass

3.3 in the build folder webpack.base.conf Add configuration in. JS rules

{
  test: /\.scss$/,
  loaders: ['style', 'css', 'sass']
}

Note: whether or not to add the following (CSS)

 {
    test:/\.css$/,
    loader:'style-loader'
 },
 {
    test:/\.css$/,
    loader:'css-loader'
 }

3.4 in APP.vue Modify style label in

<style lang="scss">

3.5 then run the project

$ npm run dev

4 frequently asked questions

4.1 sass loader version 8.0 error

Generally, projects using sass will encounter the pit of build failure. Try many ways to say that node NPM is not compatible
After trying, it was found to be invalid
The final solution is this reduced version
sass-loader”: “^7.0.3”,
Now my version:

sass-loader:"7.0.3",
node-sass:"4.7.2"

4.2 sass loader installation failed

Cannot download "https://github.com/sass/node-sass/releases/download/v3.8.0/win32-x64-46_binding.node":

This item often fails to download due to wall or intranet reasons. You can download it manually at the address just prompted. After downloading, it can be registered as a global environment variable. There are two ways:

  • Right click my computer properties advanced system settings environment variables add
  • Set XXX = file path
windows: set SASS_BINARY_PATH=F:\lishiming\tools\node-sass\win32-x64-46_binding.node
linux: export SASS_BINARY_PATH=F:\lishiming\tools\node-sass\win32-x64-46_binding.node

Check whether the environment is suitable:echo %SASS_BINARY_PATH%

If you print out your configured file address, it’s OK.

4.4 node sass installation failed

Common reasons for node sass installation failure
When NPM installs the node sass dependency, it will github.com Download the. Node file from the. Due to the domestic network environment problems, this download time may be very long, even lead to timeout failure.
This is a depressing problem that students who use sass may encounter.

The solution is to use a different source, or use a tool to download, and then specify the installation source locally.
It is easy to change the source of the external network. This paper mainly introduces the internal network scheme:

  • Download. Node to local

Choose to download the. Node file according to the version number and system environment, and then specify the variable sass during installation_ binary_ Path, such as:

npm i node-sass --sass_binary_path=/Users/aaa/Downloads/darwin-x64-48_binding.node

Common problems and phenomena

npm WARN Error: EPERM: operation not permitted, scandir 'E:\zkh360\Zkh360.Web.Admin\app\node_modules\har-validator\node_modules'
npm WARN { Error: EPERM: operation not permitted, scandir 'E:\zkh360\Zkh360.Web.Admin\app\node_modules\har-validator\node_modules'
npm WARN stack: 'Error: EPERM: operation not permitted, scandir \'E:\zkh360\Zkh360.Web.Admin\app\node_modules\har-validator\node_modules\'',
npm WARN errno: -4048,
npm WARN code: 'EPERM',
npm WARN syscall: 'scandir',
npm WARN path: 'E:\zkh360\Zkh360.Web.Admin\app\node_modules\har-validator\node_modules' }
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

4.5 error reported by chromedriver

phenomenon

> [email protected] install /Users/Jason/Documents/vue-router/node_modules/chromedriver
> node install.js

Downloading http://chromedriver.storage.googleapis.com/2.16/chromedriver_mac32.zip
Saving to /var/folders/_1/4khr45254mbfbn7k7fvmbkk80000gn/T/chromedriver/chromedriver_mac32.zip
Receiving...
ChromeDriver installation failed undefined
npm ERR! Darwin 15.0.0
npm ERR! argv "/usr/local/Cellar/node/0.12.2_1/bin/node" "/usr/local/bin/npm" "install"
npm ERR! node v5.0.0
npm ERR! npm  v3.4.1
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script 'node install.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the chromedriver package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node install.js
npm ERR! You can get their info via:
npm ERR!     npm owner ls chromedriver
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/Jason/Documents/vue-router/npm-debug.log

Intranet solution

  • Download chrome River version 2.46 (corresponding version)
  • To replace the original desktop version of chrome River, my location is / usr / local / lib / node_ modules/node_ modules/macaca-chromedriver/exec
  • Note: the name must be chrome River 2.46, although the version is 2.48
  • Winows directory
C:\Users\abc\AppData\Local\Temp.46\chromedriver

After 4.5 CSS is converted to SCSS, the loader path problem occurs

Static resources can be processed in two ways:

  • 1. In the following cases, resources are not processed by webpack, but copied directly:

It is placed in the public directory, even if it is not used.
Is referenced by an absolute path, that is, a path that begins with /.

  • 2. In the following cases, resources will be processed by webpack (URL resolution, minify, uglify, Base64, etc.):
Import using JavaScript.
In template / CSS, it is referenced by relative path (i.e. starting with. Or directly starting with file (folder) name).
The URL starts with ~, and anything after it will be parsed as a module request.
The URL starts with @ and it will also be parsed as a module request (@ is the alias set in webpack).