Как установить SASS в проект через npm?

Question

[boga-net]

Здравствуйте. Моё знакомство с node и установка чего-то через консоль началась с установки Vue через webpack. Там всё было несложно для новичка : установка vue-cli, затем npm init webpack-simple, затем установка зависимостей : npm i. И на десерт запуск вотчера : npm run dev. Теперь при сохранении в текстовом редакторе, страница автоматически обновляется. На том моё знакомство с node закончилось и можно было вытирать пот со лба. Сегодня захотел попробовать установить только sass, подсмотрев в одном видео уроке такую команду

npm install sass-loader node-sass style-loader --save-dev

И хотя автор устанавливал sass после установки vue, но судя по команде, тут просто ставится sass. Я попробовал, и конечно же sass не заработал. Видимо, дело в зависимостях и чего-то ещё не хватает. Подскажите, пожалуйста, что ещё нужно, чтобы в проект подключился sass-loader? До этого я пользовался программой Koala. Но хочется потихонечку перебарывать лёгкие пути и медленно понимать node.
Так что хотелось бы иметь возможность использовать sass в проекте и чтобы страница могла автоматически обновляться. А там уже может и дальше пойдёт. Я стараюсь делать всё пошагово и не хотелось бы сейчас вникать во всю внутреннюю кухню node. Любая новая информация даётся с большим трудом. Мне бы в обычный пустой проект просто установить sass и запускать npm run dev - хотя это из одного видео. В другом, автор использовал npm start. И пока всё на том. Что для этого нужно? Заранее спасибо.

Answer 1

[nakree]

В документации все написано. В ютубе полно роликов про webpack 4. Пример установки лоадера показан вот здесь https://webpack.js.org/concepts/loaders/#example . Пример установки sass-loader написан прямо в npm. Чтобы настроить перезагрузку страницы при изменениях, то нужно настроить dev сервер в вебпаке. Готовых конфигов, если не хочется вникать, в интернете полно.

Документация отвечает на все вопросы на 100%. Вкратце, нужно указать в webpack.config.js точку входа (это главный js файл), и точку выхода (куда ложить файлы после обработки вебпаком). Импортировать модули-лоадеры, для обработки каждого нужного файла (изначально вебпак ничего не умеет), и добавить их в конфиг. Если нужно, то добавить еще модули-плагины. И настроить dev сервер. Запускать вебпак через командную строку, или прописать в package.json новый скрипт, например такой:

"scripts": {
    "dev": "webpack-dev-server --mode development --open"
}

И просто писать npm run dev для запуска.

Пример настройки лоадеров, с описанием, что делает каждый, взято с npm:

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS
            ]
        }]
    }
};

Comments

[boga-net]

Большое спасибо за развёрнутый ответ. К сожалению, любая документация даётся с большим трудом, т.к. мне сложно визуально воспринимать техническую информацию в силу рядя причин. К тому же, с английским языком я не на "ты". Мне легче понять аудио информацию с живым примером. И как вариант - просто увидеть некое готовое решение : пример того, что нужно ввести в командную строку, чтобы добиться желаемого результата. Если не вдаваться в подробности, то это, конечно, сугубо моя проблема, но в данный момент легче задать вопрос, чем попытаться почитать документацию, в процессе прочтения которой, пропадёт всякое желание что-либо делать, утратится концентрация внимания и захочется спать )

Именно живой пример и живое объяснение простыми словами - понятно, в отличие от сухого языка документации.

Спасибо, буду разбирать ваш ответ

[boga-net]

nakree
Я правильно понял, что в файле package.json описаны все зависимости проекта и если взять какой-то готовый package.json и в командной строке запустить npm i, то установятся все зависимости ?

Я взял package.json из другого проекта, в который устанавливал Vue, через npm init webpack-simple и здесь удалил лишнее (что связано со Vue и Babel :

"devDependencies": {
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }

Теперь после команды npm i всё это дело установится, правильно понимаю ? И вебпак и sass лоадер. Значит можно иметь один такой готовый package.json с нужными мне библиотеками, модулями и просто закидывать его в проект и устанавливать все ништяки ?

[nakree]

boga-net, да, так можно. Только желательно перед этим удалить папку node_modules, на всякий случай.
Чтобы заработало, еще нужно добавить этот плагин для создания сss файла и webpack-cli.

Если нужен готовый пример, то вот мой package.json, лишнее убрал:

spoiler

"scripts": {
    "dev": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "node-sass": "^4.9.0",
    "path": "^0.12.7",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "webpack": "^4.9.1",
    "webpack-cli": "^2.1.4",
    "webpack-dev-server": "^3.1.4"
  },
  "main": "index.js"

и webpack.config.js:

spoiler

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');

const extractSass = new ExtractTextPlugin({
    filename: './css/styles.css',
    disable: process.env.NODE_ENV === 'development'
});

const bundleAnalyzer = new BundleAnalyzerPlugin({
  analyzerMode: 'server',
  analyzerHost: 'localhost',
  analyzerPort: 8888,
  reportFilename: 'report.html',
  defaultSizes: 'parsed',
  openAnalyzer: process.env.NODE_ENV !== 'development',
  generateStatsFile: false,
  statsFilename: 'stats.json',
  statsOptions: null,
  logLevel: 'info'
})
const cleanDist = new CleanWebpackPlugin(['dist']); // чистит /dist при каждом билде

let conf = {
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, './dist'),
		filename: '[name].bundle.js',
		sourceMapFilename: "sourcemaps/[file].map",
		publicPath: 'dist/'  // Для webpack-dev-server, чтобы запускать файлы из памяти на лету без build
	},
	devServer: {
		overlay: true		// Если будет ошибка, появится оверлей на странице
	},
	module: {
		rules: [
			{
				test: /\.(js|jsx)$/,	// regExp
				loader: 'babel-loader',
				exclude: '/node_modules' //исключение
			},
			{
				test: /\.scss$/,
				use: extractSass.extract({
          fallback: 'style-loader', //если не сработает извлечение, то записать в js
          use: ['css-loader', 'sass-loader']
        })
			},
			{
				test: /\.(png|svg|jpg|gif)$/,
				use: ['file-loader']
			},
			{
				test: /\.(woff|woff2|eot|ttf|otf)$/,
				use: ['file-loader']
			}
		]
	},
	plugins: [
		cleanDist,
               extractSass
  ]
};

module.exports = (env, options) => {
	let production = options.mode === 'production';

	conf.devtool = production ? 'source-map' : 'eval-sourcemap';

	//смотрим какой mode при запуске, и выбираем какие соурс мапы писать
	//eval - быстрее, но пишет в итоговый файл(больше вес)

	return conf;
}

[boga-net]

nakree, Спасибо. Всё работает, кроме определения стилей. Всё это время пытался разобраться в вебпаке. Всё хорошо, но стили не определяются из файла scss. Всматриваляс десяток раз в код, всё сверял, пробовал разные варианты и стили работают только в теге style в index.html

В общем, решил забить на это дело до лучших времён )
Ещё раз спасибо

На всякий случай прилагаю код, чтобы показать, что всё сделал так же

в шапке html

<link rel="stylesheet" href="dist/styles.scss">
// пробовал и css

index.js
import './css/style.scss';

package.json

"devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "node-sass": "^4.9.0",
    "path": "^0.12.7",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "webpack": "^4.9.1",
    "webpack-cli": "^2.1.4",
    "webpack-dev-server": "^3.1.4"
  }

webpack.config.js

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
const extractSass = new ExtractTextPlugin({
	    	filename: './css/styles.css',
	    	disable: process.env.NODE_ENV === 'development'
});

const cleanDist = new CleanWebpackPlugin(['dist']);

let conf = {
	entry: './src/index.js',
	output: {
		path: path.resolve(__dirname, './dist/'),
		filename: 'main.js',
		publicPath: 'dist/'
	},
	devServer: {
		overlay: true
	},
	module: {
		rules: [
			{
        test: /\.scss$/,
        use: extractSass.extract({
          fallback: 'style-loader',
          use: ['css-loader', 'sass-loader']
        })
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ['file-loader']
      }
		]
	},
	plugins: [
		cleanDist,
    extractSass
  ]
};

// Карта кода
module.exports = (env, options) => {
	let production = options.mode === 'production';

	conf.devtool 	= production 
								? false
								: 'eval-sourcemap';

	return conf;
}

файл style.scss в папке src, в папке css
файл main.js в папке src
файл index.html в корневой папке проекта

[boga-net]

nakree, наконец-то заработало ))

Этот способ выдавал ошибку

const extractSass = new ExtractTextPlugin({
	    	filename: './css/style.css',
 	    	disable: process.env.NODE_ENV === 'development'
});

а вот с этим заработало :

plugins: [
		cleanDist,
    new ExtractTextPlugin('style.css')
  ]

Не знаю, в чём дело, может в разных версиях чего-то. И ещё помогла команда

npm rebuild node-sass

Теперь осталось понять, как приручить не .scss, а .sass )

Ещё раз спасибо

Answer 2

[knowledge]

npm i --save-dev gulp-sass

Comments

[boga-net]

knowledge чего-то явно не хватает ) то есть я открываю командную строку, ввожу одну эту команду и всё должно заработать ? В папке проекта появилась папка node_modules и файл package-lock.json
SASS не активен

Что ещё нужно установить, чтобы node отслеживал изменения в проекте, чтобы работало npm run dev ?