Vue 融入flexible.js scss(sass)文件 添加scss文件 sass

Posted 2021-01-31 luziluck

Vue 融入flexible.js   scss

1.

安装

npm install node-sass --save-dev

npm install sass-loader --save-dev

npm install style-loader --save-dev    

npm install sass-resources-loader --save-dev

不需要在index.js中进行引入任何一个文件

 

2.Build/webpack.base.conf.js里加入

{

        test: /.scss$/,

        loaders: ["style", "css", "sass"]

 },

这样配置了scss文件的识别

 

3.build/util.js里

scss: generateLoaders(‘sass‘),

换为
scss: generateLoaders(‘sass‘).concat(

      {

        loader: ‘sass-resources-loader‘,

        options: {

          resources: path.resolve(__dirname, ‘../src/common/scss/reset.scss‘)  

        }

      }

    ),

这样引入公共的scss文件，现在测试的智能引入一个

 

4.

index.html中引入flexible.js

 

5.使用的vue页面

<style lang="scss" scoped="" type="text/css">

这里写scss样式

</style>

 

6.本地的190102-app-flexible-scss项目是Vue 融入flexible.js   scss